<template>
    <div class="course-play">
        <Header></Header>
        <div class="play-header">
            <div class="header-back" @click="goBack">
                <img src="../../assets/icons/fanhui.png" alt="">
            </div>
            <div v-if="!isReview" class="shagnkebtn">
                <div class="anniu" @click="modal3Visible = true">
                    <img src="../../assets/icons/jieshu.png" alt="">
                    <span>结束上课</span>
                </div>
                <a-statistic
                    title=""
                    :value="formattedTime"
                    class="custom-timer"
                />
            </div>
            <div class="header-right">
                <p class="title">{{ courseName }}</p>
                <p v-if="period" class="title" style="margin-left: 16px">第{{ period }}课时</p>
                <div class="btnlist">
                    <!-- <div class="zytj">
                        <img src="../../assets/icons/zuoye2.png" alt="">
                        <span>作品提交情况</span>
                    </div> -->
                    <!-- <div class="qhkc" @click="changeCourse">
                        <img src="../../assets/icons/qiehuan2.png" alt="">
                        <span>切换课程</span>
                    </div> -->
                </div>
            </div>
        </div>
        <div class="play-content">
            <div class="meau-left">
                <div class="common-bq">
                    <div class="common-item" v-for="(item, index) in normalList" :key="index">
                        <div class="item-top" @click="item.isShowTitle = !item.isShowTitle">
                            <div class="top-left">
                                <!-- <img :src="item.src" alt=""> -->
                                <span>{{ item.name }}</span>
                            </div>
                            <img class="jiantou" src="../../assets/icons/shang.png" alt="">
                        </div>
                        <div v-if="item.isShowTitle">
                            <p class="biaoti" v-for="(sItem, sIndex) in item.list" :key="sIndex"  @click="handleNormal(sItem, sIndex, index)" :class="currentIndex == sIndex && currentFirstIndex == index ? 'active' : ''">{{ sItem.name }}</p>
                        </div>
                    </div>
                    <div class="common-item">
                        <div class="item-top" @click="toResource">
                            <div class="top-left">
                                <span>资料压缩包</span>
                            </div>
                        </div>
                    </div>
                    <div class="common-item">
                        <div class="item-top" @click="submitHomeWork">
                            <div class="top-left">
                                <!-- <img src="../../assets/icons/zuoye.png" alt=""> -->
                                <span>提交作业</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="play-ground">
                <PPT v-if="isPPT" :playUrl="playUrl"></PPT>
                <PDF v-if="isPDF" :playUrl="playUrl"></PDF>
                <Video v-if="isVideo" :playUrl="playUrl"></Video>
                <IMG v-if="isIMG" :playUrl="playUrl"></IMG>
                <!-- <BricksMode v-if="isBricks"></BricksMode> -->
                <div class="upload-box" v-if="isHomework">
                    <p class="uptishi">支持.png/.jpg，10M以内图片文件</p>
                    <div class="uptitle">
                        <b></b>
                        <p>图片上传</p>
                    </div>
                    <Upload @uploadSuccess="uploadSuccess"></Upload>
                    <button class="submitbtn" @click="submitWork">提交</button>
                </div>
                <div class="resource-list" v-if="isResource">
                    <a-table :columns="columns" :data-source="tableData" :rowKey="(row, index) => {return index;}" bordered>
                        <a slot="name"></a>
                        <template slot="operation" slot-scope="text, record">
                            <a class="actionBtn" href="javascript:;" @click="downloadFile(record)">下载</a>
                        </template>
                    </a-table>
                </div>
            </div>
        </div>
        <a-modal
            v-model="modal2Visible"
            title="提示"
            centered
            @cancel="() => goBack()">
            <p style="text-align: center;">未加入班级的学生，无法查看哦！需要观看完整版，</p>
            <p style="text-align: center;">请联系老师加入班级吧～</p>
            <template slot="footer">
                <span class="okbtn" @click="goBack">确定</span>
            </template>
        </a-modal>
        <a-modal v-model="modal3Visible" title="离开教室" centered>
            <p style="text-align: center;">老师正在上课，确定离开教室吗？</p>
            <template slot="footer">
                <div class="foot-btn">
                    <span class="qxbtn" @click="modal3Visible = false">继续上课</span>
                    <span class="okbtn" @click="goBack">确认离开</span>
                </div>
            </template>
        </a-modal>
    </div>
</template>
<script>
import Header from "../../components/Header.vue";
import PPT from "../../components/FilePlay/PPT.vue";
import PDF from "../../components/FilePlay/PDF.vue";
import Video from "../../components/FilePlay/Video.vue";
import IMG from "../../components/FilePlay/IMG.vue";
import BricksMode from "../../components/ProgramCode/BricksMode.vue";
import Upload from "../../components/Upload.vue";
const columns = [
  {
    title: '名称',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '上传日期',
    dataIndex: 'create_time_text',
    key: 'create_time_text',
  },
  {
    title: '操作',
    dataIndex: 'operation',
    scopedSlots: { customRender: 'operation' },
  },
];
export default {
    name: 'coursePlay',
    components: { Header, PPT, PDF, Video, BricksMode, Upload, IMG },
    data() {
        return {
            elapsedTime: 0,
            currentIndex: 0,
            currentFirstIndex: 0,
            normalList: [],
            isPPT: false,
            isPDF: false,
            isVideo: false,
            isBricks: false,
            isHomework: false,
            isIMG: false,
            isResource: false,
            isReview: false,
            fileName: '',
            filePath: '',
            period: '',
            courseId: '',
            courseName: '',
            planId: '',
            playUrl: '',
            modal2Visible: false,
            modal3Visible: false,
            tableData: [],
            columns,
            timer: null
        }
    },
    computed: {
        formattedTime() {
            const hours = Math.floor(this.elapsedTime / 3600)
                .toString()
                .padStart(2, '0');
            const minutes = Math.floor((this.elapsedTime % 3600) / 60)
                .toString()
                .padStart(2, '0');
            const seconds = (this.elapsedTime % 60)
                .toString()
                .padStart(2, '0');
            return `${hours}:${minutes}:${seconds}`;
        }
    },
    created() {
        this.courseName = this.$route.query.name || '';
        this.courseId = this.$route.query.id || '';
        this.planId = this.$route.query.plan_id || '';
        this.period = this.$route.query.period || '';
        this.isReview = !!this.$route.query.review;
        this.getCoursewareList();
        this.getCourseResource();
        const userinfo = JSON.parse(localStorage.getItem('userinfo'));
        console.log(userinfo, 'userinfo----');
        if (userinfo.id_type === 0) {
            this.modal2Visible = true;
        }
        this.timer = setInterval(() => {
            this.elapsedTime++;
        }, 1000);
    },
    methods: {
        async getCoursewareList() {
            const res = await this.$request.get(`api/course/directory?plan_id=${this.planId}`);
            if (res.code === 1) {
                // console.log(res.data, '----kejian');
                res.data.map(item => {
                    this.$set(item, 'isShowTitle', false);
                })
                this.normalList = res.data;
            }
        },
        async getCourseResource() {
            const res = await this.$request.get(`api/course/resource?plan_id=${this.planId}`);
            if (res.code === 1) {
                console.log(res.data, '----kejian');
                this.tableData = res.data;
            }
        },
        handleNormal(item, index, findex) {
            // 文件类型：1-ppt，2-pdf，3-视频，4-图片
            this.currentIndex = index;
            this.currentFirstIndex = findex;
            this.playUrl = item.url;
            const ftype = item.url.slice(item.url.lastIndexOf('.') + 1).toLowerCase();
            if (ftype === 'ppt' || ftype === 'pptx') {
                this.isPPT = true;
                this.isPDF = false;
                this.isVideo = false;
                this.isIMG = false;
                this.isHomework = false;
                this.isResource = false;
            } else if (ftype === 'pdf') {
                this.isPPT = false;
                this.isPDF = true;
                this.isVideo = false;
                this.isIMG = false;
                this.isHomework = false;
                this.isResource = false;
            } else if (ftype === 'mp4') {
                this.isPPT = false;
                this.isPDF = false;
                this.isVideo = true;
                this.isIMG = false;
                this.isHomework = false;
                this.isResource = false;
            } else if (ftype === 'jpg' || ftype === 'png' || ftype === 'jpeg') {
                this.isPPT = false;
                this.isPDF = false;
                this.isVideo = false;
                this.isIMG = true;
                this.isHomework = false;
                this.isResource = false;
            }
        },
        handleResource(item) {
            this.fileName = item.name;
            this.filePath = item.url;
            this.isHomework = false;
            this.isPPT = false;
            this.isPDF = false;
            this.isVideo = false;
            this.isIMG = false;
            this.isResource = true;
        },
        handleTitle(item) {
            item.isShowTitle = !item.isShowTitle;
        },
        handleBricks() {
            this.isBricks = true;
            this.isPPT = false;
            if (item.file_type == 1) {
                this.isPPT = true;
                this.isPDF = false;
                this.isVideo = false;
                this.isIMG = false;
                this.isHomework = false;
                this.isResource = false;
            } else if (item.file_type == 2) {
                this.isPPT = false;
                this.isPDF = true;
                this.isVideo = false;
                this.isIMG = false;
                this.isHomework = false;
                this.isResource = false;
            } else if (item.file_type == 3) {
                this.isPPT = false;
                this.isPDF = false;
                this.isVideo = true;
                this.isIMG = false;
                this.isHomework = false;
                this.isResource = false;
            }  else if (item.file_type == 4) {
                this.isPPT = false;
                this.isPDF = false;
                this.isVideo = false;
                this.isIMG = true;
                this.isHomework = false;
                this.isResource = false;
            }
        },
        uploadSuccess(res, upfiles) {
            this.fileName = res.name || '我的作品';
            const fileArr = [];
            upfiles.map(item => {
                fileArr.push(item.response.data.fullurl);
            })
            this.filePath = fileArr.join(',');
        },
        async changeCourse() {
            const res = await this.$request.get(`api/edu/switch_plan?course_id=${this.$route.query.id}`);
            if (res.code === 1) {
                this.$message.success(res.msg);
                // console.log(res.data, '====resresres');
            } else {
                this.$message.error(res.msg);
            }
        },
        submitHomeWork() {
          this.isHomework = true;
          this.isPPT = false;
          this.isPDF = false;
          this.isVideo = false;
          this.isIMG = false;
          this.isResource = false;
        },
        toResource() {
            this.isHomework = false;
            this.isPPT = false;
            this.isPDF = false;
            this.isVideo = false;
            this.isIMG = false;
            this.isResource = true;
        },
        downloadFile(item) {
            //window.open(item.url);
            window.open(process.env.VUE_APP_BASE_API + '/api/course/resource_down?_t='+localStorage.getItem('token')+'&id='+item.id);
        },
        submitWork() {
            this.$request.post('api/edu/submit_homework', { course_id: this.courseId, name: this.fileName, file_path: this.filePath }).then(res => {
                if (res.code == 1) {
                    this.$message.success('提交成功！')
                } else {
                    this.$message.error(res.msg)
                }
            })
        },
        goBack() {
            this.$router.go(-1);
            clearInterval(this.timer);
            this.elapsedTime = 0;
        }
    },
    beforeDestroy() {
        clearInterval(this.timer);
    }
}
</script>
<style lang="less" scoped>
.course-play{
    height: 100vh;
    overflow: hidden;
    // overflow: auto;
    .play-header{
        width: 100%;
        height: 44px;
        line-height: 44px;
        display: flex;
        background: linear-gradient( 90deg, #3881F8 0%, #5EA3FE 100%);
        position: relative;
        margin-top: 80px;
        .header-back{
            line-height: 44px;
            margin-left: 26px;
            cursor: pointer;
            img{
                width: 16px;
                height: 16px;
            }
        }
        .shagnkebtn{
            // width: 200px;
            display: flex;
            align-items: center;
            margin-left: 30px;
            .anniu{
                display: flex;
                justify-content: center;
                width: 92px;
                height: 30px;
                line-height: 30px;
                background: #EBF2FE;
                border-radius: 8px;
                opacity: 0.6;
                margin-right: 20px;
                cursor: pointer;
                img{
                    width: 14px;
                    height: 14px;
                    margin-top: 8px;
                    margin-right: 5px;
                }
                span{
                    font-weight: 500;
                    font-size: 14px;
                    color: #DF3131;
                }
            }
            p{
                font-weight: 400;
                font-size: 14px;
                color: #FFFFFF;
                margin-bottom: 0px;
            }
        }
        .header-right{
            display: flex;
            justify-content: center;
            width: calc(100% - 140px);
            .title{
                font-weight: 500;
                font-size: 18px;
                color: #FFFFFF;
                margin-bottom: 0px;
            }
            .btnlist{
                width: 300px;
                position: absolute;
                right: 100px;
                top: 7px;
                display: flex;
                align-items: center;
                .zytj{
                    width: 128px;
                    height: 32px;
                    line-height: 32px;
                    background: rgba(235, 242, 254, 0.3);
                    border-radius: 8px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-right: 24px;
                    cursor: pointer;
                }
                .qhkc{
                    width: 100px;
                    height: 32px;
                    line-height: 32px;
                    background: rgba(235, 242, 254, 0.3);
                    border-radius: 8px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    cursor: pointer;
                }
                img{
                    width: 14px;
                    height: 14px;
                    margin-right: 5px;
                }
                span{
                    font-weight: 400;
                    font-size: 14px;
                    color: #FFFFFF;
                }
            }
        }
    }
    .play-content{
        display: flex;
        justify-content: space-between;
        .meau-left{
            width: 340px;
            height: calc(100vh - 24px);
            background: #317AF7;
            /deep/ .ant-tabs-bar{
                border-bottom: none;
            }
            /deep/ .ant-tabs-nav{
                color: #FFFFFF;
            }
           /deep/ .ant-tabs-tab-active{
                color: #FFD800;
                border-bottom: 2px solid #FFD800 !important;
                z-index: 999;
           }
           .item-top{
                display: flex;
                justify-content: space-between;
                padding: 0 38px;
                height: 44px;
                line-height: 44px;
                background: rgba(241, 233, 233, 0.1);
                cursor: pointer;
                .top-left{
                    display: flex;
                    img{
                        width: 20px;
                        height: 20px;
                        margin-right: 10px;
                        margin-top: 12px;
                    }
                    span{
                        font-weight: 400;
                        font-size: 16px;
                        color: #FFFFFF;
                    }
                }
                .jiantou{
                    width: 14px;
                    height: 12px;
                    margin-top: 18px;
                }
           }
           .biaoti{
                font-size: 14px;
                color: #FFFFFF;
                line-height: 44px;
                cursor: pointer;
                text-align: left;
                margin-left: 60px;
                &.active{
                    color: #FFD800;
                }
           }
           .paneitem{
                display: flex;
                background: rgba(241, 233, 233, 0.1);
                height: 44px;
                line-height: 44px;
                padding-left: 38px;
                cursor: pointer;
                img{
                    width: 20px;
                    height: 20px;
                    margin-top: 12px;
                    margin-right: 10px;
                }
                span{
                    font-weight: 400;
                    font-size: 16px;
                    color: #FFFFFF;
                }
                &.active{
                    color: #FFD800;
                    background: rgba(241, 233, 233, 0.2);
                }
           }
        }
        .play-ground{
            width: calc(100% - 320px);
            height: 90vh;
            overflow: hidden;
            // overflow: auto;
            background: #06398F;
            padding: 10px;
            .upload-box{
                background: #FFFFFF;
                border-radius: 10px;
                padding: 50px;
                height: 100%;
                .uptishi{
                    font-weight: 400;
                    font-size: 14px;
                    color: #DF3131;
                    padding-top: 45px;
                }
                .uptitle{
                    display: flex;
                    align-items: center;
                    border-bottom: 1px solid #E9E6F2;
                    margin-bottom: 20px;
                    padding-bottom: 20px;
                    b{
                        width: 4px;
                        height: 18px;
                        background: linear-gradient( 90deg, #3881F8 0%, #5EA3FE 100%);
                        border-radius: 7px;
                        margin-right: 10px;
                    }
                    p{
                        font-weight: 600;
                        font-size: 20px;
                        color: #0C0D0E;
                        margin-bottom: 0px;
                        span{
                            font-weight: 400;
                            font-size: 15px;
                            color: #23272A;
                        }
                    }
                }
                .submitbtn{
                    width: 170px;
                    height: 56px;
                    line-height: 56px;
                    background: linear-gradient( 90deg, #3881F8 0%, #5EA3FE 100%);
                    border-radius: 8px;
                    font-weight: 400;
                    font-size: 16px;
                    color: #FFFFFF;
                    border: none;
                    margin-top: 60px;
                    float: left;
                }
            }
            .resource-list{
                background: #fff;
                border-radius: 10px;
                padding: 50px;
                height: 100%;
            }
        }
    }
}
/deep/ .ant-modal-content{
    width: 456px;
    height: 234px;
    background: linear-gradient( 180deg, #DFF1FF 0%, #FFFFFF 100%);
    box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.1);
    border-radius: 8px;
}
/deep/ .ant-modal-header{
    background: none;
    border-bottom: none;
    font-weight: 500;
    font-size: 18px;
    color: #000000;
}
/deep/ .ant-modal-footer{
    text-align: center;
    border-top: none;
}
.foot-btn{
    display: flex;
    align-items: center;
    margin: 0 auto;
    width: 306px;
}
.qxbtn{
    width: 134px;
    height: 40px;
    line-height: 40px;
    background: #EDF5FF;
    border-radius: 100px;
    border: 1px solid #A1C3FF;
    font-weight: 400;
    font-size: 16px;
    color: #0082FF;
    cursor: pointer;
}
.okbtn{
    width: 134px;
    height: 40px;
    line-height: 40px;
    background: linear-gradient( 90deg, #3881F8 0%, #5EA3FE 100%);
    border-radius: 100px;
    font-weight: 400;
    font-size: 16px;
    color: #FFFFFF;
    display: block;
    margin: 0 auto;
    cursor: pointer;
}
</style>